/*
 * @Author: 韩富贵 hanxzi@163.com
 * @Date: 2022-08-21 16:36:38
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-12-13 16:21:59
 */
import styles from './new.module.less';
import { Tooltip } from 'antd';
const BarYCategoryItem = (props: any) => {
    const {
        item,
        index,
        formatter,
        formatter1,
        textStyle,
        itemStyle,
        multipleColor = false,
        valueLabel = true,
        unit,
        textColor,
        value2
    } = props;
    const colors = ['#F92E7A', '#E3C726', '#0CF348', '#0AEBFF']

    return (
        <div style={itemStyle?.itemGap}>
            <div className={`${styles['bar-item']} ${styles[`bar-item-${index}`]}`}>
                <div className={styles['rank-label']}>
                    {multipleColor ? (
                        <div className={styles['rank-font']}>NO.{index}</div>
                    ) : (
                        <div className={styles['rank-icon']} style={{ color: (textColor ? textColor : '#fff') }}>{index}</div>
                    )}
                </div>

                <div className={styles['rank-content']} style={itemStyle?.style} title={item.name}>
                    <Tooltip title={item.name}>{item.name}</Tooltip>
                </div>
                {valueLabel && (
                    <div className={styles['rank-value']} style={{ ...textStyle.valueStyle }}>
                        <div style={{ color: textStyle.color ? colors[index > 3 ? '3' : index - 1] : (textColor ? textColor : '#fff') }}>
                            {formatter ? formatter(item) : item.value}
                            <span style={textStyle?.unitLabel}>{unit}</span>
                        </div>
                    </div>
                )}
            </div>
            {
                value2 ? <div className={'flex gap-[20px] items-center'}>
                    <div className={styles['progress']} >
                        <div className={`${styles['progress-value']} `}
                            style={{ width: `${item.percent}%` }}
                        ></div>
                    </div>
                    <div style={{ ...textStyle.valueStyle, color: item.color }}>{formatter1 ? formatter1(item) : item.value}</div>
                </div> :
                    <div className={styles['progress']}>
                        <div className={`${styles['progress-value']} `}
                            style={{ width: `${item.percent}%` }}
                        >
                        </div>
                    </div>
            }

        </div>
    );
};
const BarYCategoryNew: React.FC<any> = (props) => {
    const {
        data = [],
    } = props;
    return (
        <div className={styles['popular-ranking']}>
            <div className={styles['ranking-tbody']}>
                {data?.length > 0 &&
                    data.map((item: any, index: any) => (
                        <BarYCategoryItem
                            item={item}
                            key={index}
                            index={index + 1}
                            {...props}
                        />
                    ))}
            </div>
        </div>
    );
};
export default BarYCategoryNew;
